<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DOM操作</title>
    <script src="js/jquery-1.12.4.js"></script>
    <style>
        img{
            border: double 5px red;
            margin: 10px;  /*外边距*/
            padding: 8px; /*内边距*/
        }

        .a {
            color: red;
        }
        .b {
            color: yellow;
        }
    </style>
</head>
<body>

    <p id="p" class="a">
        这是一个<b>段落</b>。
    </p>

    <!--<input type="text" id="a">-->

    <!--<img id="img" src="img/0.jpg" height="300" width="300"/>-->
    <input type="button" value="点击" id="btn">
</body>
<script>
    $(function(){
        //给按钮绑定点击事件
        $("#btn").click(function(){
            //获取p标签中的文本内容
            // console.log(document.getElementById("p").innerText); //获取标签中的文本
            // console.log(document.getElementById("p").innerHTML); //获取标签中的内容（包含标签）
            // console.log($("#p").text()); //获取文本
            // console.log($("#p").html()); //获取内容，包括标签
            // console.log($("#a").val()); //获取 文本框的数据

            //获取属性值
            // console.log($("#img").attr("src")); // 主要是操作 普通属性
            // console.log($("#img").prop("src")); //主要是操作 disabled， checked, selected


            //修改标签中的内容
            // $("#p").text("这是一个<b>新段落</b>");
            // $("#p").html("这是一个<b>新段落</b>");
            // $("#a").val("文本框");
            //修改图片的链接地址
            // $("#img").attr("src", "img/0.jpg");

            //获取css样式值
            // console.log($("#img").css("width"));
            // console.log($("#img").css("height"));
            // console.log($("#img").css("border"));
            //设置css样式
            // $("#img").css("border", "double red 1px");
            // $("#p").css("fontSize", "50px");

            // console.log("宽度"+$("#img").width());
            // console.log("高度:"+$("#img").height());
            // console.log("宽度(包含内边距)"+$("#img").innerWidth());
            // console.log("高度(包含内边距)"+$("#img").innerHeight());
            // console.log("宽度(包含内边距,边框)"+$("#img").outerWidth());
            // console.log("高度(包含内边距,边框)"+$("#img").outerHeight());

            // $("#p").addClass("a");
            // $("#p").removeClass("a");
            $("#p").toggleClass("b")


        });
    });


</script>
</html>